<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2017/6/20
  Time: 8:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <!-- 引入JQuery -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <!-- 引入EasyUI -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/easyui-lang-zh_CN.js"></script>
    <!--
    <script  type="text/javascript" src="scripts/index.js"></script>
  -->
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" type="text/css"/>
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/icon.css" type="text/css"/>
</head>
<body>
<table id="group_list_dg" style="width:auto" >
    <thead>
    <tr>
        <th data-options="field:'id'">商品编号</th>
        <th data-options="field:'name'">商品名称</th>
        <th data-options="field:'type'">商品类型</th>
        <th data-options="field:'quantity'">商品库存量</th>
        <th data-options="field:'price',width:100">商品价格</th>
    </tr>
    <thead>
</table>

<div id="group_save_dialog" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#group_save_dialog_buttons" modal="true">
    <div class="ftitle">请输入机构信息</div>
    <form id="group_info_form" method="post">
        <div class="fitem">
            <label>名称:</label>
            <input type="text" name="name" />
        </div>
        <div class="fitem">
            <label>类型:</label>
            <input type="text" name="type" />
        </div>
        <div class="fitem">
            <label>库存量:</label>
            <input type="text" name="quantity" />
        </div>
        <div class="fitem">
            <label>价格:</label>
            <input type="text" name="price" />
        </div>

        <input type="hidden" name="id" />
    </form>
</div>
<div id="group_save_dialog_buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveGroup()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#group_save_dialog').dialog('close')">取消</a>
</div>

<script type="text/javascript">
    var UrlConfig = {
        SysGroupList: '<%=request.getContextPath() %>/goods/list',
        SysGroupAdd: '<%=request.getContextPath() %>/goods/add',
        SysGroupUpdate: '<%=request.getContextPath() %>/goods/list/',
        SysGroupDelete: '<%=request.getContextPath() %>/goods/delete'
    };
    $(function(){
        $('#group_list_dg').datagrid({
            url: UrlConfig.SysGroupList,
            toolbar: '#group_list_dg_toolbar',
            striped: true ,					//隔行变色特性
            loadMsg: '数据正在加载,请耐心的等待...' ,
            singleSelect: true,
            rownumbers: true,
            fit: true,
            fitColumns: true,
            pagination: true ,
            pageSize: 10 ,
            pageList:[5,10,15,20,50],
            toolbar:[
                {
                    text:'导出excel',
                    iconCls:'icon-save',
                    handler:function(){
                        //获取后台传递参数 className  methodName
                        var className = $('#group_list_dg').datagrid('getData').className;
                        var methodName = $('#group_list_dg').datagrid('getData').methodName;
                        //获取表头信息
                        var header = $('#group_list_dg').datagrid('options').columns[0];
                        var fields = "";
                        var titles = "";
                        for(var i = 0;i<header.length;i++){
                            var field = header[i].field;
                            var title = header[i].title;
                            var hiddenFlag = header[i].hidden;
                            if(!hiddenFlag){
                                var dh = i == (header.length -1) ? "" :",";
                                fields = fields + field + dh;
                                titles = titles + title + dh;
                            }
                        }
                        //向后台发送请求
                        var form = $("<form>");//定义一个form表单
                        form.attr('style','display:none');
                        form.attr('target','');
                        form.attr('method','post');
                        form.attr('action','excel');
                        //添加input
                        var input1 = $("<input>");
                        input1.attr('type','hidden');
                        input1.attr('name','fields');
                        input1.attr('value',fields);

                        var input2 = $("<input>");
                        input2.attr('type','hidden');
                        input2.attr('name','titles');
                        input2.attr('value',titles);

                        var input3 = $("<input>");
                        input3.attr('type','hidden');
                        input3.attr('name','className');
                        input3.attr('value',className);

                        var input4 = $("<input>");
                        input4.attr('type','hidden');
                        input4.attr('name','methodName');
                        input4.attr('value',methodName);

                        //将表单放到body中
                        $('body').append(form);
                        form.append(input1);
                        form.append(input2);
                        form.append(input3);
                        form.append(input4);
                        form.submit();//提交表单
                    }
                },
                {
                    text:'新增',
                    iconCls:'icon-add',
                    handler:openAddGroupDialog
                },
                {
                    text:'修改',
                    iconCls:'icon-edit',
                    handler:openEditGroupDialog
                },
                {
                    text:'删除',
                    iconCls:'icon-remove',
                    handler:deleteGroup
                }
            ]
        });
    });
    var url;
    function openAddGroupDialog(){
        $('#group_save_dialog').dialog('open').dialog('setTitle','添加商品');
        $('#group_save_dialog').window("center");
        $('#group_info_form').form('clear');
        url = UrlConfig.SysGroupAdd;
    }
    function openEditGroupDialog(){
        var row = $('#group_list_dg').datagrid('getSelected');
        if (row){
            $('#group_save_dialog').dialog('open').dialog('setTitle','编辑商品');
            $('#group_info_form').form('load',row);
            url = UrlConfig.SysGroupUpdate+row.id;
        } else {
            alert("请选择需要修改的行");
        }
    }
    function saveGroup(){
        $('#group_info_form').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                result = eval('(' + result + ')');
                //console.log(result.status);
                if (result.status=="200") {
                    $('#group_save_dialog').dialog('close');        // close the dialog
                    $('#group_list_dg').datagrid('reload');    // reload the user data
                    $.messager.show({ title: '操作结果', msg: '操作成功' });
                } else {
                    $.messager.show({ title: '操作结果', msg: result.message });
                }
            }
        });
    }
    function deleteGroup() {
        var row = $('#group_list_dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','请确认是否删除?',function(r){
                if (r){
                    $.post(UrlConfig.SysGroupDelete, {id:row.id}, function(result){
                        console.log(result);
                        if(result.status=="200"){
                            $.messager.show({ title: '操作结果', msg: '操作成功' });
                            $('#group_list_dg').datagrid('reload');
                        }else{
                            $.messager.show({ title: '操作结果', msg: '删除失败！' });
                        }
                    },'json');
                }
            });
        } else {
            alert('请选择一行');
        }
    }
</script>
</body>
</html>
